<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>07_事件处理</title>
  </head>
  <body>
    <!--
    1. 绑定监听:
      v-on:xxx="fun"
      @xxx="fun"
      @xxx="fun(参数)"
      默认事件形参: event
      隐含属性对象: $event
    2. 事件修饰符:
      .prevent : 阻止事件的默认行为 event.preventDefault()
      .stop : 停止事件冒泡 event.stopPropagation()
    3. 按键修饰符
      .keycode : 操作的是某个keycode值的健
      .enter : 操作的是enter键
    -->

    <div id="example">
      <h2>1. 绑定监听</h2>
      <!-- 事件回调函数直接写函数，回调函数参数是event -->
      <button @click="handleClick1">按钮</button>
      <button @click="handleClick2()">按钮</button>
      <!-- 事件回调函数写成函数调用形式，为了给函数传递其他参数 -->
      <button @click="handleClick3(123, true)">按钮</button>
      <!-- $event代表event参数 -->
      <button @click="handleClick4(123, true, $event)">按钮</button>
      <p>{{count}}</p>
      <button @click="handleClick5">按钮</button>
      <!-- 如果回调函数只有一条语句，可以直接写 -->
      <button @click="count++">按钮</button>
      <h2>2. 事件修饰符</h2>
      <!-- 文档：https://cn.vuejs.org/v2/api/#v-on -->
      <a href="http://www.atguigu.com" @click="handleClick6">硅谷</a>
      <a href="http://www.atguigu.com" @click.prevent="handleClick7">硅谷</a>
      <h2>3. 按键修饰符</h2>
      <input type="text" @keyup="handleKeyUp1" />
      <input type="text" @keyup.13="handleKeyUp2" />
      <input type="text" @keyup.enter="handleKeyUp2" />
    </div>

    <script src="../js/vue.js"></script>
    <script>
      new Vue({
        el: "#example",
        data: {
          count: 0,
        },
        methods: {
          handleClick1() {
            console.log(111, arguments);
          },
          handleClick2() {
            console.log(222, arguments);
          },
          handleClick3() {
            console.log(333, arguments);
          },
          handleClick4() {
            console.log(444, arguments);
          },
          handleClick5() {
            this.count++;
          },
          handleClick6(e) {
            e.preventDefault();
          },
          handleClick7() {},
          handleKeyUp1(e) {
            if (e.keyCode === 13) {
              console.log("enter");
            }
          },
          handleKeyUp2() {
            console.log("enter");
          },
        },
      });
    </script>
  </body>
</html>
